<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="title">
                Lab Detail
            </ui:define>

            <ui:define name="content">
                <f:metadata>
                    <f:viewParam name="labid" value="#{labDetailBean.labid}" />
                </f:metadata>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $('#editu').hide();
                    });
                    $(document).ready(function(){
                        $('#btne').click(function(){
                            $('#editu').show();
                            $('#detail').hide();
                        });
                    });
                    $(document).ready(function(){
                        if($('#labname').val()==""||$('#desc').val()==""){
                            $('#editu').show();
                            $('#detail').hide();
                        }
                    });
                </script>
                <h:form prependId="falses">
                    <div id="detail">
                        <table align="center" width="500px">
                            <tr>
                                <td colspan="2"><h3 align="center">Lab Detail</h3></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center"><p:messages id="messages" showDetail="true" autoUpdate="true"  globalOnly="true"/></td>
                            </tr>
                            <tr>
                                <td>Lab Name</td>
                                <td>#{labDetailBean.lab.labname}</td>
                            </tr>
                            <tr>
                                <td>Description</td>
                                <td>#{labDetailBean.lab.description}</td>
                            </tr>
                            <tr>
                                <td>Create Date</td>
                                <td><h:outputText value="#{labDetailBean.lab.createDate}">
                                        <f:convertDateTime pattern="dd/MM/yyy" />
                                    </h:outputText></td>
                            </tr>
                            <tr>
                                <td>Status</td>
                                <td><h:outputText value="#{labDetailBean.lab.status}">
                                        <f:converter converterId="UserStatus" />
                                    </h:outputText></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <input id="btne" type="button" value="Edit Lab" />
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div id="editu">
                        <table align="center" width="500">
                            <tr>
                                <td colspan="2"><h3 align="center">Edit Lab</h3></td><td></td>
                            </tr>
                            <tr>
                                <td>Lab Name</td>
                                <td><h:inputText id="labname" value="#{labDetailBean.labname}" required="true" requiredMessage="Lab Name invalid !" /></td>
                                <td><p:message for="labname" /></td>
                            </tr>
                            <tr>
                                <td>Description</td>
                                <td><h:inputTextarea id="desc" value="#{labDetailBean.description}" required="true" requiredMessage="Description invalid !" /></td>
                                <td><p:message for="desc" /></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <h:commandButton id="btnedituser" value="Change Lab" action="#{labDetailBean.editLab}"   />
                                </td>
                            </tr>
                        </table>
                    </div>
                </h:form> 
            </ui:define>

        </ui:composition>

    </body>
</html>
